<template>
  <div>
    <div>
      <el-select v-model="currentName" placeholder="请选择" @change="handleSelect">
        <el-option v-for="(item, index) in links" :value="item.code" :label="item.name" :key="index"></el-option>
      </el-select>
      <p v-if="attrs.desc" class="desc">{{ attrs.desc }}</p>
      <component v-if="showDialog !== 'none'" :is="showDialog" :productDialogVisible="isOpen" @save="getSelectData" @close="reset"/>
    </div>
  </div>
</template>

<script>
import formMixin from 'vue-ele-form/lib/mixins/formMixin';
import customizeDialog from '_c/Dialog/customize_dialog';
import customThemeDialog from '_c/Dialog/custom_theme_dialog';
import customUrlDialog from '_c/Dialog/custom_url_dialog';
import { debounce } from '@/utils/utils';

export default {
    name: 'select-with-tips', // name 属性必须填写, 在使用时, 需要和这里定义的 name 一致
    mixins: [formMixin], // 必须引入mixin
    props: {
    // value 是传递过来的值
        value: Object,
        // desc是此组件的描述, 结构为
        // { style: {}, class: {}, on: {}, attrs: {} }
        desc: {
            type: Object,
            default () {
                return {};
            }
        }
    },
    components: {
        'system_auto': customizeDialog,
        'theme_auto': customThemeDialog,
        'url_auto': customUrlDialog
    },
    watch: {
        value (newVal, oldVal) {
            this.currentName = newVal ? (newVal.type !== 'home' ? this.textMap[newVal.type] + ':' + newVal.title : this.textMap[newVal.type]) : 'no-link';
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.reset();
        });
    },
    data () {
        return {
            // 用于v-model绑定, 因为 v-model无法绑定props值
            textMap: {
                'none': '无',
                'system_auto': '系统自定义页面',
                'theme_auto': '主题自定义页面',
                'url_auto': '自定义url'
            },
            showDialog: '',
            isOpen: true,
            currentName: '',
            links: [
                {
                    code: 'none',
                    name: '无'
                },
                {
                    code: 'theme_auto',
                    name: '主题自定义'
                },
                {
                    code: 'system_auto',
                    name: '系统自定义'
                },
                {
                    code: 'url_auto',
                    name: '自定义url'
                }
            ]
        };
    },
    methods: {
        handleSelect () {
            this.isOpen = ['theme_auto', 'url_auto', 'system_auto'].includes(this.currentName);
            this.showDialog = this.currentName;
            if (this.currentName === 'none') {
                this.$emit('input', {
                    type: 'none',
                    title: ''
                });
            }
        },
        getSelectData (data) {
            this.isOpen = false;
            const map = {
                'series_detail_page': '/collection',
                'product_detail_page': '/products',
                'system_auto': '/system-auto-page',
                'theme_auto': '/custom-page'
            };
            if (data) {
                this.$emit('input', {
                    title: this.currentName === 'product_detail_page' ? data.spuName : (this.currentName === 'series_detail_page' || this.currentName === 'theme_auto') ? data.name : this.currentName === 'system_auto' ? data.title : data.url,
                    id: data.id,
                    url: this.currentName === 'url_auto' ? data.url : map[this.currentName] + '/' + data.id,
                    type: this.currentName
                });
                this.$emit('rowData', data);
            }
        },
        reset () {
            if (this.resourcelinks.length !== 0 && this.value) {
                let val;
                if (typeof this.value === 'string') {
                    val = JSON.parse(this.value);
                } else {
                    val = this.value;
                }

                this.currentName = val ? this.textMap[val.type] + ':' + val.title : '';
            } else {
                this.currentName = this.value ? (this.value.type !== 'home' ? this.textMap[this.value.type] + ':' + this.value.title : this.textMap[this.value.type]) : '';
            }
        }
    }
};
</script>

<style scoped lang="scss">
.desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 12px;
  line-height: 20px;
  font-weight: 400;
  text-transform: initial;
  word-wrap: break-word;
  word-break: break-word;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  clear: both;
  padding: 0 15px 0 0;
}
</style>
